<template>
	<div>
		<u-tabbar :value="selectValue" :fixed="true" :placeholder="false" :safeAreaInsetBottom="false"
			inactiveColor="#B6B6B6" activeColor="#333333" zIndex="999">
			<u-tabbar-item text="首页" name='home' @click="toPage">
				<image class="icon" slot="active-icon" src="@/static/tabbar/home-active.png">
				</image>
				<image class="icon" slot="inactive-icon" src="@/static/tabbar/home.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的" name='mine' @click="toPage">
				<image class="icon" slot="active-icon" src="@/static/tabbar/mine-active.png">
				</image>
				<image class="icon" slot="inactive-icon" src="@/static/tabbar/mine.png"></image>
			</u-tabbar-item>
		</u-tabbar>
	</div>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'

	export default {
		name: 'MTabbar',
		data() {
			return {
        lastTapTime: 0,
				urlMap: {
					home: '/pages/home/index'
				}
			}
		},
		props: {
			selectValue: {
				type: String,
			}
		},
		computed: {},
		methods: {
      toPage(value) {
        const currentTime = Date.now();

        // 检查是否为双击并触发刷新事件
        if (this.isDoubleTap(currentTime, value)) {
          this.$emit('handleRefresh');
          this.lastTapTime = 0; // 重置时间戳
          return; // 不再继续处理跳转逻辑
        }

        // 更新时间戳
        this.lastTapTime = currentTime;

        // 如果选择的值未变化，则无需跳转
        if (this.selectValue === value) return;

        const url = this.urlMap[value]
        if (url) {
          uni.reLaunch({
            url
          })
        }
      },
      /**
       * 判断是否为双击操作
       * @param {number} currentTime - 当前时间戳
       * @param {string} value - 当前选择的值
       * @returns {boolean} 是否为双击操作
       */
      isDoubleTap(currentTime, value) {
        return currentTime - (this.lastTapTime || 0) <= 200 && this.selectValue === value;
      }
		},
		watch: {

		}

	}
</script>

<style lang="scss" scoped>
	::v-deep .u-tabbar__content__item-wrapper {
		height: 128rpx;

	}

	.icon {
		width: 60rpx;
		height: 60rpx;
	}
</style>